<template>
  <div class="my-container">
    <div class="title">桥区日常管理</div>    
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/bridgeAreaControl-bridge">
        <span>桥梁信息</span>
      </van-tabbar-item>
      <van-tabbar-item to="/bridgeAreaControl-channel">
        <span>桥区航道</span>
      </van-tabbar-item>
      <van-tabbar-item to="/bridgeAreaControl-ship">
        <span>船舶通航</span>
      </van-tabbar-item>      
    </van-tabbar>
    <router-view />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const active = ref(0);
</script>

<style lang="scss" scoped>
  .my-container{
    width: 100%;
    height: 100%;   
    .title{
      height: 68px;
      background-image:url('../../static/images/bridgeAreaControl/bg_zhuanti.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 500; 
      color: #fff;   
    }
  }
  :deep(.van-tabbar--fixed){
    position: relative;
  }
  :deep(.van-tabbar-item){
    font-weight: 400;
    font-size: 16px;
    color: #595959;
  }
  :deep(.van-tabbar-item--active){
    font-weight: 800;
    font-size: 16px;
    color: #165DFF;
  }
</style>